<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>左右滑动</title>
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1.0"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <meta name="author" content="Colin"/>
    <link type="text/css" rel="stylesheet" href="css/style.css">
    <link type="text/css" rel="stylesheet" href="css/main.css">
</head>
<body>
<section>
    <!-- view container -->
    <ul id="pages" class="view-container" style="">
        <!-- pageA container -->
        <li id="pageA" class="page-container"style="display:block;">
            <header>HEADER A</header>
            <b id="btnNext1" class="page-num">A</b>
        </li>
        <!-- pageB container -->
        <li id="pageB" class="page-container" style="display:none;"> <header>HEADER B</header> <b id="btnNext2" class="page-num">B</b></li>
        <!-- pageC container -->
        <li id="pageC" class="page-container" style="display:none;"> <header>HEADER C</header> <b id="pageBack" class="page-num">C</b></li>
    </ul>

</section>

<footer>FOOTER</footer>

<!-- framework -->
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/touch.js"></script>
<script>
    var screenW = $('body').width();

    var btnNext1 = $('#btnNext1');
    var btnNext2 = $('#btnNext2');
    var pageBack = $('#pageBack');
    var pages = $('#pages');
    var pageA = $('#pageA');
    var pageB = $('#pageB');
    var pageC = $('#pageC');

    //.slideSlow 慢速滑动，一定是左边的页面
    //.slideFast 快速滑动，一定是右边的页面
    //.slideSlowBack 返回时，慢速滑动，一定是左边的页面
    //.slideFastBack 返回时，快速滑动，一定是右边的页面
    //.pageInt  初始页面位置
    //.pageOld  正向划过页面位置 -100%
    //.pageNew  正向未滑页面位置 +100%

    btnNext1.click(function(){
        pageA.css({'-webkit-transform' : 'translate3d(-100%, 0px, 0px)' , '-webkit-transition' : '-webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s'});
        pageB.css({'-webkit-transform' : 'translate3d(0%, 0px, 0px)' , '-webkit-transition' : '-webkit-transform 350ms cubic-bezier(0.42, 0, 0.58, 1.0)'});
        pageA.css("display","none");
        pageB.css("display","block");
    });

    btnNext2.click(function(){
        pageB.css({'-webkit-transform' : 'translate3d(-100%, 0px, 0px)' , '-webkit-transition' : '-webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s'});
        pageC.css({'-webkit-transform' : 'translate3d(0%, 0px, 0px)' , '-webkit-transition' : '-webkit-transform 350ms cubic-bezier(0.42, 0, 0.58, 1.0)'});
        pageB.css("display","none");
        pageC.css("display","block");
    });
    pageBack.click(function(){
        pageB.css({'-webkit-transform' : 'translate3d(0%, 0px, 0px)' , '-webkit-transition' : '-webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0)'});
        pageC.css({'-webkit-transform' : 'translate3d(100%, 0px, 0px)' , '-webkit-transition' : '-webkit-transform 350ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s'});
        pageB.css("display","none");
        pageC.css("display","block");
    });
</script>

</body>
</html>